<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>用户注册</title>
    <link rel="stylesheet" href="main.css" />
    <!-- 嵌入样式：演示CSS嵌入样式的使用 -->
    <style>
      /* ID选择器示例 */
      #page-title {
        text-align: center;
        color: #fff;
      }

      /* 嵌入样式：为特定元素添加样式 */
      .highlight {
        font-weight: bold;
      }
    </style>
    <script type="text/javascript">
      function setRootFontSize() {
        var rootHtml = document.documentElement;
        var rem = rootHtml.clientWidth / (1080 / 100); //1080为设计图px宽度
        rootHtml.style.fontSize = rem + "px";
      }
      setRootFontSize(); //网页首次载入时执行一次
      window.addEventListener("resize", setRootFontSize, false); //网页大小改变时执行
      window.addEventListener("orientationchange", setRootFontSize, false); //横屏切换时执行
    </script>
  </head>
  <body>
    <!-- 头部区域 -->
    <div class="header">
      <div class="header-left">
        <img src="img/sub_back.png" alt="返回" class="icon-back" />
      </div>
      <!-- ID选择器示例：使用id属性 -->
      <div class="header-title" id="page-title">用户注册</div>
      <div class="header-right">
        <img src="img/sub_more.png" alt="更多" class="icon-more" />
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div class="container">
      <!-- 注册表单区域 -->
      <div class="form-section">
        <!-- 用户名 -->
        <div class="form-row">
          <!-- 内联样式示例：直接在元素上使用style属性 -->
          <label class="form-label" style="font-weight: normal">用户名</label>
          <input
            type="text"
            id="username"
            class="form-input"
            placeholder="请输入用户名"
            oninput="hideError()"
          />
        </div>

        <!-- 手机号 -->
        <div class="form-row">
          <label class="form-label">手机号</label>
          <input
            type="tel"
            id="phone"
            class="form-input form-input-phone"
            placeholder="请输入手机号"
            oninput="onPhoneInput()"
          />
          <!-- 发送验证码按钮 -->
          <button id="btnSendCode" class="btn-code" onclick="sendCode()">
            发送验证码
          </button>
          <!-- 验证码输入框（默认隐藏） -->
          <input
            type="number"
            id="verifyCode"
            class="form-input-code"
            placeholder="请输入验证码"
            style="display: none"
            oninput="hideError()"
          />
        </div>

        <!-- 密码 -->
        <div class="form-row">
          <label class="form-label">密码</label>
          <input
            type="password"
            id="password"
            class="form-input"
            placeholder=""
            oninput="hideError()"
          />
        </div>

        <!-- 确认密码 -->
        <div class="form-row" style="margin-bottom: 0.5rem">
          <label class="form-label">确认密码</label>
          <input
            type="password"
            id="confirmPassword"
            class="form-input"
            placeholder=""
            oninput="hideError()"
          />
        </div>

        <!-- 错误信息区域（默认隐藏） -->
        <div id="errorMessage" class="error-message" style="display: none">
          * 用户名不能为空
        </div>

        <!-- 注册按钮 -->
        <div style="padding-top: 0.5rem">
          <button class="btn-register" onclick="register()">注册</button>
        </div>

        <!-- 底部链接 -->
        <div class="form-links">
          <span class="link-left">已有账号</span>
          <span class="link-right">更换手机号</span>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="footer-nav">
      <div class="nav-item active" onclick="switchTab(this, 'home')">
        <img
          src="img/main_home2.png"
          alt="首页"
          class="nav-icon"
          data-active="img/main_home2.png"
          data-normal="img/main_home1.png"
        />
        <span class="nav-text">首页</span>
      </div>
      <div class="nav-item" onclick="switchTab(this, 'config')">
        <img
          src="img/main_config1.png"
          alt="设置"
          class="nav-icon"
          data-active="img/main_config2.png"
          data-normal="img/main_config1.png"
        />
        <span class="nav-text">设置</span>
      </div>
    </div>

    <script>
      // Tab切换功能
      function switchTab(element, tabName) {
        // 获取所有导航项
        var navItems = document.querySelectorAll(".nav-item");

        // 移除所有active类
        navItems.forEach(function (item) {
          item.classList.remove("active");
          var icon = item.querySelector(".nav-icon");
          // 切换回普通状态图标
          icon.src = icon.getAttribute("data-normal");
        });

        // 给当前点击的项添加active类
        element.classList.add("active");
        var currentIcon = element.querySelector(".nav-icon");
        // 切换到active状态图标
        currentIcon.src = currentIcon.getAttribute("data-active");
      }

      // ========== 表单验证功能 ==========

      // 显示错误信息
      function showError(message) {
        var errorDiv = document.getElementById("errorMessage");
        errorDiv.innerHTML = "* " + message;
        errorDiv.style.display = "block";
      }

      // 隐藏错误信息
      function hideError() {
        var errorDiv = document.getElementById("errorMessage");
        if (errorDiv.style.display === "block") {
          errorDiv.style.display = "none";
        }
      }

      // 验证手机号格式（11位数字，1开头）
      function validatePhone(phone) {
        var phoneReg = /^1[3-9]\d{9}$/;
        return phoneReg.test(phone);
      }

      // 点击"发送验证码"按钮
      function sendCode() {
        var phone = document.getElementById("phone").value;

        // 验证手机号是否为空
        if (phone === "" || phone === null) {
          showError("手机号不能为空");
          return;
        }

        // 验证手机号格式
        if (!validatePhone(phone)) {
          showError("手机号不正确");
          return;
        }

        // 验证通过：隐藏"发送验证码"按钮，显示验证码输入框
        document.getElementById("btnSendCode").style.display = "none";
        document.getElementById("verifyCode").style.display = "block";
        hideError();
      }

      // 手机号输入框改动事件
      function onPhoneInput() {
        hideError();
        // 如果验证码输入框已显示，则还原为"发送验证码"按钮
        var verifyCodeInput = document.getElementById("verifyCode");
        if (verifyCodeInput.style.display === "block") {
          verifyCodeInput.style.display = "none";
          verifyCodeInput.value = ""; // 清空验证码
          document.getElementById("btnSendCode").style.display = "block";
        }
      }

      // 点击"注册"按钮
      function register() {
        var username = document.getElementById("username").value;
        var phone = document.getElementById("phone").value;
        var password = document.getElementById("password").value;
        var confirmPassword = document.getElementById("confirmPassword").value;
        var verifyCode = document.getElementById("verifyCode").value;

        // 验证用户名
        if (username === "" || username === null) {
          showError("用户名不能为空");
          return;
        }

        // 验证手机号
        if (phone === "" || phone === null) {
          showError("手机号不能为空");
          return;
        }

        if (!validatePhone(phone)) {
          showError("手机号不正确");
          return;
        }

        // 验证密码
        if (password === "" || password === null) {
          showError("密码不能为空");
          return;
        }

        // 验证确认密码
        if (confirmPassword === "" || confirmPassword === null) {
          showError("确认密码不能为空");
          return;
        }

        // 验证两次密码是否一致
        if (password !== confirmPassword) {
          showError("两次输入密码不一致");
          return;
        }

        // 验证验证码
        if (verifyCode === "" || verifyCode === null) {
          showError("验证码不能为空");
          return;
        }

        if (verifyCode !== "123456") {
          showError("验证码不正确");
          return;
        }

        // 所有验证通过
        alert("已提交注册信息");
        hideError();
      }
    </script>
  </body>
</html>
